import React from "react";
import { Flex } from "antd-mobile";
import { withRouter } from "react-router";
import PropTypes from 'prop-types'

import './index.scss'

function searchHeader(props) {
  return (
    <div className={[props.className || '', "searchBar"].join(' ')}>
      <Flex className="search" align="center">
        <div className="location" onClick={() => props.history.push('/cityList')}>
          <span className="locationName">{ props.myCityName || '北京' }</span>
          <i className="iconfont icon-arrow" />
        </div>
        <div className="searchInput" onTouchEnd={() => {props.history.push('/rent/search')}}>
          <i className="iconfont icon-seach" />
          <span className="searchFont">{props.word}</span>
        </div>
      </Flex>
      <i className="iconfont icon-map"  onClick={() => props.history.push('/map')}></i>
    </div>
  )
}

// 添加属性校验
searchHeader.propTypes = {
  myCityName: PropTypes.string.isRequired
}

export default withRouter(searchHeader)